<div ng-include="'components/navbar/navbar.html'"></div>

<div class="w980" style="padding:160px 0">
  <div class="col-sm-offset-7 col-sm-5">
    <form class="form-horizontal" name="userForm" novalidate>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
          <input type="text" class="form-control" name="email"
                 ng-minlength="5" ng-maxlength="20" ng-model="user.email"
                 required placeholder="请输入登陆邮箱" ng-pattern="/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/">
        </div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.email.$dirty&&userForm.email.$error.minlength">邮箱地址长度最小为5位</div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.email.$dirty&&userForm.email.$error.maxlength">邮箱地址长度最大为20位</div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.email.$dirty&&userForm.email.$error.pattern">请输入正确有效邮箱地址</div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
          <input type="text" class="form-control" name="username"
                 ng-minlength="4" ng-maxlength="16" ng-model="user.username"
                 required placeholder="请输入昵称">
        </div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.username.$dirty&&userForm.username.$invalid">昵称为4~16个字符串组成</div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
          <input type="password" class="form-control" name="password"
                 ng-minlength="3" ng-maxlength="16" ng-model="user.password"
                 required placeholder="请输入密码">
        </div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.password.$dirty&&userForm.password.$error.maxlength">密码最大长度为16位</div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.password.$dirty&&userForm.password.$error.minlength">密码最小长度为4位</div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
          <input type="password" class="form-control" name="repeatpassword"
                 ng-minlength="3" ng-maxlength="16" ng-model="user.repeatpassword"
                 required placeholder="请再次确认密码">
        </div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.repeatpassword.$dirty&&userForm.repeatpassword.$error.maxlength">密码最大长度为16位</div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.repeatpassword.$dirty&&userForm.repeatpassword.$error.minlength">密码最小长度为4位</div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></div>
          <input type="text" class="form-control" name="phone" ng-model="user.phone"
                 ng-pattern="/^1\d{10}$/" required placeholder="请输入联系电话">
        </div>
        <div class="alert alert-danger col-sm-10" role="alert"
             ng-show="userForm.phone.$dirty&&userForm.phone.$invalid">请输入合法的手机号码</div>
      </div>
      <div class="form-group">
        <div class="input-group" style="height: 39px;line-height: 39px">
          <label for="avator" style="line-height: 30px">设置个性头像</label>
          <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" id="avator"
               ngf-accept="'image/*'" ngf-max-size="50KB" ngf-min-height="120"
               ngf-resize="{width: 120, height: 120,quality: .8,centerCrop: true}">选择图片</div>
          <img ngf-src="file"  ngf-resize="{width: 40, height: 40, quality: 0.9}"
               ngf-no-object-url="true or false" class="imgPreview"/>
        </div>
      </div>
      <div class="form-group" ng-show="!userFormToltip">
        <div class="alert alert-danger col-sm-10" role="alert">{{signupTooltip}}</div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-3">
          <button type="button" class="btn btn-primary"
                  ng-disabled="userForm.$invalid" ng-click="register()">&nbsp;&nbsp;注&nbsp;&nbsp;册&nbsp;&nbsp;</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div ng-include="'components/navbar/footer.html'"></div>
